* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
}
div {
  margin: auto;
}
h1 {
  font-size: 100px;
  color: #acacac;
  /* 默认状态为透明度0，不显示 */
  opacity: 0;
  /* 增加动画，显示名字 */
  /* 动画名称show_name */
  /* 持续2秒 */
  /* 线性开始结束放慢 */
  /* 延迟0.5秒 */
  /* 执行1次 */
  /* 结束时停在最后一帧 */
  /* 统一使用show动画 */
  animation: show 2s ease-in-out 0.5s 1 forwards;
}

/* 创建动画透明度从开始0到结束1  */
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
h1::before {
  position: absolute;
  /* 这里必须是Unicode编码 */
  /* 注意：转换完毕去掉\后面的U */
  content: "mumu开发屋";
  /* 颜色改为透明让背景色显示出来 */
  color: transparent;
  /* 使用linear-gradient函数生成一个渐变“图片”做背景 */
  /* 渐变颜色随便个人喜好 */
  background-image: linear-gradient(
    to right,
    #bed742,
    #f8aba6,
    #585eaa,
    #ed1941,
    #7fb80e,
    #f26522,
    #ffc20e,
    #7c8577,
    #009ad6,
    #65c294,
    #f47920,
    #f15b6c,
    #2e3a1f
  );
  /* 这个谷歌浏览器不起作用 */
  background-clip: text;
  /* 谷歌浏览器适配 */
  -webkit-background-clip: text;
  /* 制作一个斜矩形遮罩 */
  /* 使用polygon方法 */
  /* 矩形需要定义四个角的坐标，顺时针方向定义 */
  /* 分别为左上、右上、右下、左下 */
  /* 位置以百分比为单位 */
  /* 因为要做动画，所有先将遮罩层移除当前可视区域 */
  clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
  /* 增加动画 */
  /* 动画名称light */
  /* 持续时间2秒 */
  /* 延迟0秒执行 */
  /* 直接方式循环 */
  /* 延迟2秒执行等待显示 */
  animation: light 2s 2s infinite;
}

/* 初始与结束保持一致 */

/* 中间为最右侧 */

@keyframes light {
  0% {
    clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
  }
  50% {
    clip-path: polygon(100% 0%, 120% 0%, 110% 100%, 90% 100%);
  }
  100% {
    clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
  }
}
